<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>OAuth Server Login</title>
		<!-- 样 式 文 件 -->
		<link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css" />
	</head>
    <!-- 代 码 结 构 -->
	<body>
	    <section class="h-100">
			<div class="container h-100">
				<div class="row justify-content-sm-center h-100">
					<div class="col-xxl-4 col-xl-5 col-lg-5 col-md-7 col-sm-9">
						<div class="text-center my-5">
							<img src="/images/spring-security.svg" alt="logo" width="100">
						</div>
						<div class="card shadow-lg">
							<div class="card-body p-5">
								<h1 class="fs-4 card-title fw-bold mb-4">登录</h1>
								<form action="/login" method="post" class="needs-validation" novalidate="" autocomplete="off">
									<div class="mb-3">
										<label class="mb-2 text-muted" for="email">账号</label>
										<input id="usernameInput" type="text" class="form-control" name="username" value="" required autofocus>
										<div class="invalid-feedback">
											无效账号
										</div>
									</div>
	                                <input name="_csrf" type="hidden" value="${_csrf.token}">
									<div class="mb-3">
										<div class="mb-2 w-100">
											<label class="text-muted" for="password">密码</label>
											<a href="forgot.html" class="float-end">
												忘记密码?
											</a>
										</div>
										<input id="password" type="password" class="form-control" name="password" required>
									    <div class="invalid-feedback">
									    	密码不能为空
								    	</div>
									</div>
	
									<div class="d-flex align-items-center">
										<button type="submit" class="btn btn-primary ms-auto">
											登录
										</button>
									</div>
								</form>
							</div>
							<div class="card-footer py-3 border-0">
								<div class="text-center">
									还没账号? <a href="register.html" class="text-dark">创建账号</a>
								</div>
							</div>
						</div>
						<div class="text-center mt-5 text-muted">
							Copyright &copy; 2017-2021 &mdash; Your Company 
						</div>
					</div>
				</div>
			</div>
		</section>
		<script src="/bootstrap/js/bootstrap.bundle.min.js"></script>
	</body>
</html>
